<template>
    <transition name="fade">
        <div class="media-wrapper" v-if="isShow">
            <Button type="text" class="media-close" shape="circle" icon="close" @click="close"></Button>
            <div class="media-controller">
                <Button-group shape='circle'>
                    <Button size="large" type="ghost" icon="ios-skipbackward" @click.prevent="prev"></Button>
                    <Button size="large" type="ghost" icon="ios-skipforward" @click.prevent="next"></Button>
                </Button-group>
            </div>
            <div class="media-content">
                <div v-for="(item,index) in pics" :key="index" :class="type(index)">
                    <img :src='item' v-if="isImg(item)" @click="toggle(index)">
                    <video :src="item" v-else controls="controls" @click="toggle(index)">
                    </video>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: 'gallery',
    data: function () {
        return {
            nowIndex: 0,
			isShow:false,
			pics:[]
        }
    },
    methods: {
        next() {
            if (this.nowIndex == this.pics.length - 1) {
                
            } else {
                this.nowIndex++;
            }
        },
        prev() {
            if (this.nowIndex == 0) {
                
            } else {
                this.nowIndex--;
            }
        },
        type(index) {
            if (index == this.nowIndex) {
                return 'media-center'
            } else if (index - this.nowIndex == 1) {
                return 'media-right'
            } else if (index - this.nowIndex == -1) {
                return 'media-left'
            } else {
                return 'media-hide'
            }
        },
        isImg(item) {
            var index1=item.lastIndexOf(".");
			var index2=item.length;
			var suffix=item.substring(index1+1,index2);
			var flag = (suffix == 'jpg')|(suffix == 'png')|(suffix == 'gif')|(suffix == 'jpeg') ;
			return flag;
        },
        toggle(index) {
            if (index - this.nowIndex == 1) {
                this.nowIndex++;
            } else if (index - this.nowIndex == -1) {
                this.nowIndex--;
            }
        },
        close() {
            this.nowIndex = 0;
			this.isShow = false;
			this.pics=[];
        }
		,
        open(srcs) {
            this.nowIndex = 0;
			var arr = srcs.split(",");
            this.pics = [];
            for(let i=0;i<arr.length;i++){
                this.pics.push(arr[i]);
            }
			this.isShow = true;
        }
    }
}
</script>

<style>
.media-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.52);
  z-index: 1010;
}
.media-wrapper i {
  color: #fff;
}
.media-wrapper .media-controller {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
}
.media-wrapper .media-close {
  position: absolute;
  right: 5px;
  top: 5px;
}
.media-wrapper .media-close i {
  font-size: 30px;
}
.media-wrapper .media-content div {
  position: absolute;
  top: 50%;
  color: #fff;
  text-align: center;
  font-size: 30px;
  transition: all 0.56s ease;
}
.media-wrapper .media-content div img {
  max-width: 100%;
  max-height: 100%;
}
.media-wrapper .media-content div video {
  max-width: 100%;
  max-height: 100%;
}
.media-wrapper .media-content .media-center {
  height: 50%;
  width: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1011;
}
.media-wrapper .media-content .media-left,
.media-wrapper .media-content .media-right {
  width: 25%;
  height: 35%;
  filter: grayscale(90%);
}
.media-wrapper .media-content .media-right {
  left: 100%;
  transform: translate(-105%, -50%);
}
.media-wrapper .media-content .media-left {
  left: 0;
  transform: translate(5%, -50%);
}
.media-wrapper .media-content .media-hide {
  height: 0;
  width: 0;
  left: 50%;
  z-index: 1010;
  opacity: 0;
}
</style>